<script setup lang="ts">
import {useCommodity} from "@/stores/commodity";
import type {IResCommodityData, IResData} from "@/types";
import {ref} from "vue";
import axios from "@/axios";
import type {TableColumnCtx} from "element-plus";

const commodity = useCommodity();

// 获取商品类别
const category = ref<Array<{ text: string, value: string }>>();
axios<IResData<string[]>>({
  url: '/admin/pro/getCategory',
  method: 'get',
}).then(r => {
  console.log(r.data)
  if (r.data.code === '200') {
    const cat: Array<{ text: string, value: string }> = []
    for (let i = 0; i < r.data.data.length; i++) {
      cat.push({text: r.data.data[i], value: r.data.data[i]})
    }
    category.value = cat
    console.log(category.value)
  }
})

const filterHandler = (
  value: string,
  row: IResCommodityData[],
  column: TableColumnCtx<IResCommodityData>
) => {
  const property = column['property']
  // @ts-ignore
  return row[property] === value
}
</script>

<template>
  <el-table :data="commodity.data" style="width: 100%">
    <el-table-column type="selection" width="55"/>
    <el-table-column property="proid" label="商品ID" width="120"/>
    <el-table-column
      prop="category"
      label="类别"
      sortable
      width="120"
      column-key="category"
      :filters="category"
      :filter-method="filterHandler"
    />
    <el-table-column property="proname" label="商品品牌" width="120"/>
    <el-table-column property="brand" label="商品名称" width="120"/>
    <el-table-column property="originprice" label="原价" width="120"/>
    <el-table-column property="sales" label="sales" width="120"/>
    <el-table-column property="stock" label="库存" width="120"/>
    <!--    <el-table-column property="desc" label="desc" width="120"/>-->
    <el-table-column property="issale" label="issale" width="120"/>
    <el-table-column property="isrecommend" label="isrecommend" width="120"/>
    <el-table-column property="discount" label="discount" width="120"/>
    <el-table-column property="isseckill" label="isseckill" width="120"/>
    <el-table-column property="imgs" label="图片" width="450">
      <template #default="scope">
        <ul style="display: flex">
          <li v-for="item in scope.row.imgs" :key="item">
            <el-image style="width: 100px; height: 100px" :src="item"/>
          </li>
        </ul>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.el-table {
  flex: 1;
  height: 100%;
  width: 100%;
  overflow: auto;
}
</style>
